<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜品详情</title>
    <link rel="stylesheet" href="css/detail.css">
    <link rel="shortcut icon" type="img/x-icon" href="img/logo.jpg"/>
    <link rel="stylesheet" href="css/laybutton.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        #diva{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 9999;
            position: absolute;
            display: none;
        }

        #diva>table{
            width: 300px;
            height: 300px;
            margin-top: 100px;
            text-align: center;
            border-radius: 20px;
            background-color: #00FFFF;
        }
    </style>
</head>
<body>

<!--遮盖层-->
<div id="diva">
    <div id="container" style="display:none; width: 50px; height: 80px;">

    </div>
    <table cellspacing="0" align="center">
        <tr>
            <td colspan="2"><b>地址确认</b></td>
        </tr>
        <tr>
            <td>检测到您当前所在的城市为:</td>
            <td>
                <select id="shi"></select>
            </td>
        </tr>
        <tr>
            <td>请输入您的详细地址:</td>
            <td>
                <input type="text" id="jie" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="确认" id="pay"/>
            </td>
        </tr>
    </table>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=nPZUEl3qTehazRgU3nyGXLMvwk8GCXBs"></script><!--<script src="./getscript"></script>-->
    <script src="js/jquery-1.10.2.js"></script><!--<script src="./jquery.min(1).js"></script>-->
    <script src="js/index.js"></script>
    <script src="js/distpicker.data.js"></script>
    <script src="js/distpicker.js"></script>
    <script src="js/distpicker.data.min.js"></script>
    <script src="js/distpicker.min.js"></script>

    <script>
        var map = new BMap.Map("container");          // 创建地图实例
        //定位当前城市
        function myFun(result){
            var cityName = result.name;
            map.setCenter(cityName);
            document.getElementById("shi").innerHTML="<option value = '"+cityName+"' selected = 'selected'>"+cityName+"</option>";
        }
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);

    </script>
</div>

<div class="nav">
    <div>
        <img src="img/logo.jpg"/>
        <div class="list">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="MerchantsDataFenServlet">全部店家</a></li>
                <li><a href="">店家详情</a></li>
                <li><a href="" class="on">菜品详情</a></li>
                <li><a href="contact.html">联系我们</a></li>
                <li><a href="gerenzhongxin.html">个人中心</a></li>
            </ul>
        </div>

    </div>
</div>
<div class="banner">
    <div class="bner-pc">
        <img src="img/banner.jpg"/>
    </div>
</div>
<div class="detail">
    <div class="detail-con">
        <c:forEach items="${foodXiangQingList}" var="nn">
        <div class="aside-left"><img src="upfiles/${nn.pic}"></div>
        <div class="aside-right">
                    <p id="fname">${nn.name}</p>
            <input type="hidden" id="mid" value="${nn.merData.merAccount.mid}">
            <input type="hidden" id="fid" value="${nn.fid}">
                    <div class="price">
                        <p>单价:</p>
                        <span>￥</span>
                        <span id="price" class="price1">${nn.price}</span>
                    </div>
                    <div class="price3">
                        <p class="number">购买数量：</p>
                        <button id="jian" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">-</i></button>
                        <input style="width: 50px" type="text" name="" readonly="readonly"  value="1"  min="1" id="aa"/>
                        <button id="add" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">+</i></button>
                    </div>
            <div class="price">
                <p>总价:</p>
                <span>￥</span>
                <span id="pricezong" class="price1"></span>
            </div>
                    <div class="shopping">
                        <a href=""><button>加入购物车</button></a>

                        <a id="addre"><button>购买</button></a>
                    </div>
        </div>
        </c:forEach>
    </div>

</div>

<div class="foot">
    <div class="footer">
        <div class="footer-bg">
            <div class="footer-border">
            </div>
            <div class="footer-list">
                <div class="footer-list1">
                    <div>服务保障</div>
                    <ul>
                        <li>正品保障</li>
                        <li>7天无理由退换货</li>
                        <li>退货返运费</li>
                        <li>7X15小时客户服务</li>
                    </ul>
                </div>
                <div class="footer-list1">
                    <div>支付方式</div>
                    <ul>
                        <li>公司转账</li>
                        <li>货到付款</li>
                        <li>在线支付</li>
                        <li>分期付款</li>
                    </ul>
                </div>
                <div class="footer-list1">
                    <div>商家服务</div>
                    <ul>
                        <li>配送中心</li>
                        <li>广告服务</li>
                        <li>服务市场</li>
                    </ul>
                </div>
                <div class="footer-list1">
                    <div>服务保障</div>
                    <ul>
                        <li>免运费</li>
                        <li>海外配送</li>
                        <li>EMS</li>
                        <li>211限时达</li>
                    </ul>
                </div>
                <div class="copyright">
                    Copyright&copy;1996-2018Fresh.All Rights Reserved.
                </div>
            </div>
        </div>
    </div>
</div>
<div class="totop">回到<br />顶部</div>
</body>
<script type="text/javascript">

    $(function () {

        zongjia(1);
        function zongjia($num){
            var $price=$("#price").text();
            $pricezong=parseInt($price)*$num;
            $("#pricezong").text($pricezong);
        }

        $("#add").click(function () {
            var $num=$("#aa").val();
            $num=parseInt($num)+1;
            zongjia($num);
            $("#aa").val($num);

        })

        $("#jian").click(function () {
            var $num=$("#aa").val();
            $num=parseInt($num)-1;
            if ($num<1){
                $num=1;
            }
            zongjia($num);
            $("#aa").val($num);
        })
    });


    $(function () {
        $("#pay").click(function () {
            location.href='AlipayPayServlet?fname='+$("#fname").text()+'&fid='+$("#fid").val()+'&price='+$("#pricezong").text()+'&mid='+$("#mid").val()+'&count='+$("#aa").val()+'&shi='+$("#shi").val()+'&jie='+$("#jie").val();
        });
    });


    $(function(){
        $(window).scroll(function(){
            var $st=$(document).scrollTop();
            console.log($st);
            if($st>=450){
                $(".totop").fadeIn(1000);
            }else{
                $(".totop").fadeOut(1000);
            }
        });
        $(".totop").click(function(){
            $("html,body").animate({"scrollTop":0},1000);
        });
    });
</script>

<script>
    $("#addre").click(function(){
        $("#diva").css("display","block");
    });
</script>
</html> 